<template>
    <el-dialog
        :title='title'
        :visible.sync="showIf"
        @open='handleOpen'
        @close='handleClose'
        top='8vh'>
        
        <section class="searchdxa">
          <el-input
            :on-icon-click='getTableData'
            @keyup.enter.native='getTableData'
            style="width:85%" 
            icon="search"
            v-model='serachVal'
          ></el-input>
          <h4>默认结果只显示前300</h4>
        </section>

        <section class="table">
          <el-table
          :data="tableData"
           @row-click='handleRowClick'
           max-height='350'
           class='employRoster-dialog-table'
           >

            <el-table-column
              v-for='(k,i) in tableOption'
              :prop='k.value'
              :label='k.label'
              :width='k.width'
              class-name='column'
              >
            </el-table-column>
            
          </el-table>

        </section>
    </el-dialog>
</template>

<script>
import Vue from 'vue'
import { Dialog } from 'element-ui'
Vue.use(Dialog)

export default {
  data () {
    return {
      showIf: false,
      tableOption: [
        {
          label: '部门编号',
          value: 'deptid'
        },
        {
          label: '部门',
          value: 'descr'
        },
        {
          label: '部门全称',
          value: 'descrshort'
        },
      ],
      tableData: [],
      serachVal: ''
    }
  },
  props: {
    dialogShowIf: {
      type: Boolean,
      default: false
    },

    dialogType: {
      type: String,
      default: ''
    },

    paramOrg: {
      type: Object,
      default: function () {
        return {}
      }
    },
    title: {
      default: '提示'
    },

  },

  watch: {
    dialogShowIf (newValue, oldValue) {
      this.showIf = newValue
    }
  },



  methods: {
    handleOpen () {
      this.serachVal = ''
      this.getTableData()
    },

    getTableData () {
      const { level_num, type } = this.paramOrg

      const _bumen = () => {
        const params = {
          level_num: level_num || '',
          type,
          pageNum: 1,
          pageSize: 300,
          search: this.serachVal
        }

        this.Axios
          .Post('/reportSearch/getDeptList', params)
          .then((res) => {
            const data = res.data.datas
            this.tableData = data
          })

      }

      const _org = () => {

        let id = ''
        this.dialogType === 'threeOrg' ? id = 3 : id = 4
        const params = {
          level_num: level_num || '',
          type,
          id,
          search: this.serachVal
        }
        this.Axios
          .Post('/reportSearch/getOrgList', params)
          .then((res) => {
            const data = res.data.datas
            this.tableData = data
          })
      }


      if (this.dialogType == 'threeOrg' || this.dialogType == 'fourOrg') {
        _org()
      } else if (this.dialogType == 'deptid') {
        _bumen()
      }

    },

    handleClose () {
      this.$emit('update:dialogShowIf', false)
    },

    handleRowClick (row) {

      const { deptid, descr, level_num } = row, value = `${descr}(${deptid})`


        // 如果是部门 要多传一个值（levelNum）
      if (this.dialogType === 'descr') {
        this.$emit('getDialogData', { value, deptid: level_num, dialogType: this.dialogType })
      } else {
        this.$emit('getDialogData', { value, dialogType: this.dialogType })
      }

      if (this.dialogType == 'threeOrg' || this.dialogType == 'fourOrg') {
        this.$emit('getLevelNum', { level_num, dialogType: this.dialogType })
      }

      this.handleClose()
    }
  },




}
</script>

<style lang='less'>
.classID {
  text-align: center;
  color: #56aadd;
  margin-top: -12px;
  margin-bottom: 12px;
  font-size: 15px;
}
.employRoster-dialog-table {
  .el-table__body-wrapper {
    .column {
      cursor: pointer !important;
    }

    .el-table__row:hover {
      color: #20a0ff !important;
    }
  }
}

.searchdxa {
  text-align: center;
  h4 {
    padding: 15px 0;
    color: rgb(195, 200, 200);
    font-size: 12px;
    font-weight: normal;
  }
}
</style>